<!DOCTYPE html>
<html lang="zh">

<head>
	<th:block th:include="include :: header('项目付款')" />
	<link href="../static/layui/css/layui.css" th:href="@{/layui/css/layui.css}" rel="stylesheet" />
	<link href="../static/layui/css/dropdown.css" th:href="@{/layui/css/dropdown.css}" rel="stylesheet" />
	<link href="../static/css/projectDetail.css" th:href="@{/css/projectDetail.css}" rel="stylesheet" />
</head>

<body class="fixed-sidebar full-height-layout gray-bg">
	<!-- 头部导航 链接 -->
	<div class="row border-bottom white-bg dashboard-header headerNav">
		<div class="col-sm-1 logo">
			<div class="icon hidden-xs">
				<i class="fa fa-file-powerpoint-o"></i>
			</div>
			<div class="progressBar">
				<i>20.00%</i>
				<!-- style和 aria-valuenow里的数字代表进度 -->
				<div class="layui-progress" style="height: 5px;">
					<div class="layui-progress-bar " lay-percent="20.00%" style="width: 20%;"></div>
				</div>
			</div>
		</div>
		<div class="col-sm-11 navBar">
			<th:block th:include="include :: projectNavBar" />
		</div>
	</div>
	<div class="wrapper wrapper-content" style="padding-bottom: 0px;">
		<div class="row">
			<div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>合计支出金额</h5>
                    </div>
                    <div class="ibox-content text-center h-200" style="padding-top:27%;min-height:275px;">
                        <h1 th:text="${zzc}">&nbsp;</h1>
                    </div>
                </div>
            </div>
			<div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>月支出趋势</h5>
                    </div>
                    <div class="ibox-content">

                        <div class="echarts" id="echarts-bar-chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>占总支出占比</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-pie-chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>占收入出占比</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-pie-chart1"></div>
                    </div>
                </div>
            </div>
        </div>
	</div>
	<!-- 主体部分 -->
	<div class="wrapper wrapper-content" style="padding-top: 0px;">
		<div class="btn-group-sm" id="toolbar" role="group">&nbsp;
        </div>
		<div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
	</div>
	<!-- import layui -->
	<th:block th:include="include :: footer" />
	<script th:src="@{/layui/dropdown.js?v=20250801}"></script>
	<th:block th:include="include :: projectDetail" />
	<th:block th:include="include :: echarts-js" />
	<!-- import layui -->
	<script th:inline="javascript">
	    var datas = [[${@dict.getType('sj_contract_status')}]];
	    var prefix = ctx + "gcgl/project";
        
        $(function() {
            var options = {
                url: prefix + "/list4ZcAll",
                modalName: "项目支出",
                pagination: false,
		        showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                queryParams: queryParams,
                columns: [{
                    checkbox: true
                },
                {
                    field: 'gcProjectid',
                    title: '合同ID',
                    visible: false
                },
                {
                    field: 'orderNo',
                    title: '付款编号'
                },
                {
                    field: 'type',
                    title: '类型'
                },
                {
                    field: 'hejexx',
                    title: '金额'
                },
                {
                    field: 'owner',
                    title: '申请人'
                },
                {
                    field: 'dept',
                    title: '申请部门'
                },
                {
		            field: 'status',
		            title: '状态',
		            align: "left",
		            formatter: function(value, item, index) {
		            	return $.table.selectDictLabel(datas, item.status);
		            }
		        }]
            };
            $.table.init(options);
            
	        //-----------
	        var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
	        var pieoption = {
	            title : {
	                text: '',
	                subtext: '',
	                x:'center'
	            },
	            tooltip : {
	                trigger: 'item',
	                formatter: "{a} <br/>{b} : {c} ({d}%)"
	            },
	            legend: {
	                orient : 'vertical',
	                x : 'left',
	                data:[[${zczbArr}]]
	            },
	            calculable : true,
	            series : [
	                {
	                    name:'支出占比',
	                    type:'pie',
	                    radius : '55%',
	                    center: ['50%', '60%'],
	                    data:[[${zczbLis}]]
	                }
	            ]
	        };
	        pieChart.setOption(pieoption);
	        $(window).resize(pieChart.resize);
	        
	        
	      	//-----------
	        var pieChart1 = echarts.init(document.getElementById("echarts-pie-chart1"));
	        var pieoption1 = {
	            title : {
	                text: '',
	                subtext: '',
	                x:'center'
	            },
	            tooltip : {
	                trigger: 'item',
	                formatter: "{a} <br/>{b} : {c} ({d}%)"
	            },
	            legend: {
	                orient : 'vertical',
	                x : 'left',
	                data:[[${srzbArr}]]
	            },
	            calculable : true,
	            series : [
	                {
	                    name:'支出占比',
	                    type:'pie',
	                    radius : '55%',
	                    center: ['50%', '60%'],
	                    data:[[${srzbLis}]]
	                }
	            ]
	        };
	        pieChart1.setOption(pieoption1);
	        $(window).resize(pieChart1.resize);
	        
	        //------------------------------
	        var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
	        var baroption = {
	            title : {
	                text: ''
	            },
	            tooltip : {
	                trigger: 'axis'
	            },
	            legend: {
	                data:['支出']
	            },
	            grid:{
	                x:30,
	                x2:40,
	                y2:24
	            },
	            calculable : true,
	            xAxis : [
	                {
	                    type : 'category',
	                    data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
	                }
	            ],
	            yAxis : [
	                {
	                    type : 'value'
	                }
	            ],
	            series : [
	                {
	                    name:'支出',
	                    type:'bar',
// 	                    data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
						data: [[${mouthDates}]]
// 	                    markPoint : {
// 	                        data : [
// 	                            {type : 'max', name: '最大值'},
// 	                            {type : 'min', name: '最小值'}
// 	                        ]
// 	                    },
// 	                    markLine : {
// 	                        data : [
// 	                            {type : 'average', name: '平均值'}
// 	                        ]
// 	                    }
	                }
	            ]
	        };
	        barChart.setOption(baroption);
	        window.onresize = barChart.resize;
        });
        
        function queryParams(params){
        	var search = $.table.queryParams(params);
        	search.id = $("#id").val();
        	return search;
        }
        
        function fksqdprint(id){
            $.modal.openTab('查看',"/gcgl/fk/fksqdprint/"+id);
        }
        
        function run(processInstanceId) {
            $.modal.open("执行记录", ctx + "flow/monitor/historyDetail?processInstanceId=" + processInstanceId);
        }
        
        function traceProcess(processInstanceId) {
            $.modal.openTab("流程进度", ctx + "flow/monitor/traceProcess/"+processInstanceId);
        }
    </script>
    <!--选中导航 这段js放在每个页面末尾-->
    <script>
		$(()=>{
			setTimeout(()=>{
				selectedNav(8)//第N个被选中 0即
			},100)
		})
		
		function selectedNav(index){
			$('ul.layui-nav').find('.layui-nav-item').eq(index).addClass('layui-this');
		}
	</script>
</body>
</html>